<template>
  <div class="videobox"  @click="playered">
    <video :src="src" v-if="src.indexOf('.mp4') >=0" :poster="poster" controls="controls" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow">
      您的浏览器不支持 video 标签。
    </video>
    <div :id="'video' + id" v-else style="width:100%;" class="videobox"><img :src="poster" style="width:100%"></div>
  </div>
</template>

<script>
export default {
  props:{
    src:{
      type: String,
      default: ''
    },
    poster:{
      type: String,
      default: ''
    },
    id:{
      type: Number,
      default: 0
    }
  },
  components: {},
  computed: {},
  data(){
    return {
      player: {}
    }
  },
  created() {
    let _this = this
    let interval = setInterval(function(){
      if(typeof ckplayer == 'function') {
        _this.playerReadied()
        clearInterval(interval)
      }
    }, 500)
    
  },
  mounted() {
    console.log('this is current player instance object', this.player)
  },
  methods: {
    playered(){
      // this.playerReadied()
    },
    playerReadied(){
      if(this.src.indexOf('.mp4') >=0) {
        // var videoObject = {
        //   autoplay: true,
        //   mobileCkControls: true,
        //   container: '#video' + this.id,//“#”代表容器的ID，“.”或“”代表容器的class
        //   variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        //   flashplayer:false,//如果强制使用flashplayer则设置成true
        //   video: this.src,//视频地址,
        //   poster: this.poster
        // };
        // this.player = new ckplayer(videoObject);
      }else if(this.src.indexOf('.png') >=0 || this.src.indexOf('.jpg') >=0) {
        this.poster = this.src
      }else{
        var videoObject = {
          container: '#video' + this.id,//“#”代表容器的ID，“.”或“”代表容器的class
          variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
          autoplay:true,//自动播放
          poster: this.poster,
          //live:true,//直播视频形式
          video: this.src//视频地址
        };
        
        let player = new ckplayer(videoObject);
        this.player = player
      }
      
    }
  }
};
</script>

<style >
  .videobox {background: #454545;}
  video {
    width: 100%;
  }
</style>